import React from 'react';

class Player extends React.Component {
    render() {
        return <div className='playerWrap'>
            {/* 黑色背景图 */}
            <div className="bg"></div>

            <div className="mediaPlayer">
                {/* 播放暂停按钮区 */}
                <div className="btns">
                    <a   className="prev playbar">上一首</a>
                    <a   className="play playbar">播放/暂停(p)</a>
                    <a   className="next playbar">下一首</a>
                </div>
                {/* 歌曲头像 */}
                <div className="head">
                    <img src="https://p2.music.126.net/yZipSHp6XCUqy9l2VybCTQ==/109951165115661793.jpg?param=34y34" alt="" />
                    <a   className="mask playbar"></a>
                </div>
                {/* 歌曲信息及进度条 */}
                <div className="play">
                    <div className="songInfo">
                        <a   className="songName" title="爱，存在">爱，存在</a>
                        <a className="singer" title="卢卢快闭嘴">卢卢快闭嘴</a>
                    </div>
                    <div className="progressBar">
                        <div className="barbg">
                            <div className="ready"></div>
                            <div className="cur">
                                <span className="iconall curBtn"></span>
                            </div>
                        </div>
                        <div className="time">
                            <em>00:40</em> / 04:20
                        </div>
                    </div>
                </div>

                {/* 添加到播放列表和分享 */}
                <div className="addShare">
                    <a   className="playbar add"></a>
                    <a   className="playbar share"></a>
                </div>

                {/* 其他功能按钮 */}
                <div className="others playbar">
                    <div className="volume">
                        <div className="playbar barbg"></div>
                        <div className="volNull">
                            <div className="playbar volCur"></div>
                            <span className="iconall volBtn"></span>
                        </div>
                    </div>
                    <a   className="playbar vol"></a>
                    <a   className="playbar mode"></a>
                    <div className=" songList">
                        <span className="tip"></span>
                        <a   className="playbar list">9</a>
                    </div>
                </div>

                {/* 播放列表 */}
                <div className="playList"></div>
            </div>

            {/* 锁定解锁按钮 */}
            <div className="lock playbar">
                <a   className="playbar lockOrNot"></a>
            </div>

            {/* 右侧补全区域 */}
            <div className="right playbar"></div>
        </div>;
    }
}

export default Player